<template>
  <div>
    <ul>
      <li @click="activeindex==index" :class="{active:activeindex==index}" v-for="(item,index) in list" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    list: Array
  },
  data () {
    return {
activeindex:0
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
ul {
  display: flex;
  list-style: none;
  align-items: center;
  text-align: center;
  li {
    flex: 1;
    height: 50px;
    background-color: red;
    &.active{
      background-color: pink;
    }
  }
}
</style>
